<template>
  <div class="api-example">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>API调用示例</span>
        </div>
      </template>
      
      <div class="card-content">
        <!-- 商品列表示例 -->
        <div class="example-section">
          <h3>商品列表</h3>
          <el-button type="primary" @click="getProductList">获取商品列表</el-button>
          <el-table v-if="products.length > 0" :data="products" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="商品名称" />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="stock" label="库存" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                {{ scope.row.status === 1 ? '上架' : '下架' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 订单统计示例 -->
        <div class="example-section">
          <h3>订单统计</h3>
          <el-button type="primary" @click="getOrderStatistics">获取订单统计</el-button>
          <div v-if="orderStats" class="stats-container">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-value">{{ orderStats.totalOrders }}</div>
                  <div class="stat-label">总订单数</div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-value">{{ orderStats.totalAmount }}</div>
                  <div class="stat-label">总金额</div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-value">{{ orderStats.pendingOrders }}</div>
                  <div class="stat-label">待处理订单</div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-value">{{ orderStats.completedOrders }}</div>
                  <div class="stat-label">已完成订单</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        
        <!-- 支付对账示例 -->
        <div class="example-section">
          <h3>支付对账</h3>
          <el-date-picker
            v-model="reconciliationDate"
            type="date"
            placeholder="选择对账日期"
            style="margin-right: 10px"
          />
          <el-button type="primary" @click="reconcilePayment">执行对账</el-button>
          <el-progress v-if="reconciling" :percentage="reconciliationProgress" style="margin-top: 10px" />
          <div v-if="reconciliationResult" class="recon-result">
            <p>对账结果：{{ reconciliationResult.status === 'SUCCESS' ? '成功' : '失败' }}</p>
            <p v-if="reconciliationResult.message">{{ reconciliationResult.message }}</p>
            <p v-if="reconciliationResult.data">
              对账总数：{{ reconciliationResult.data.total }}，差异数：{{ reconciliationResult.data.diffCount }}
            </p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { productApi, orderApi, paymentApi } from '../api/index.js'

// 数据定义
const products = ref([])
const orderStats = ref(null)
const reconciliationDate = ref('')
const reconciling = ref(false)
const reconciliationProgress = ref(0)
const reconciliationResult = ref(null)

// 获取商品列表
const getProductList = async () => {
  try {
    const res = await productApi.getProductList({
      page: 1,
      pageSize: 10
    })
    products.value = res.data.list || []
    ElMessage.success('获取商品列表成功')
  } catch (error) {
    console.error('获取商品列表失败:', error)
    ElMessage.error('获取商品列表失败')
  }
}

// 获取订单统计
const getOrderStatistics = async () => {
  try {
    const res = await orderApi.getOrderStatistics({
      startDate: '',
      endDate: ''
    })
    orderStats.value = res.data
    ElMessage.success('获取订单统计成功')
  } catch (error) {
    console.error('获取订单统计失败:', error)
    ElMessage.error('获取订单统计失败')
  }
}

// 执行对账
const reconcilePayment = async () => {
  if (!reconciliationDate.value) {
    ElMessage.warning('请选择对账日期')
    return
  }
  
  reconciling.value = true
  reconciliationProgress.value = 0
  reconciliationResult.value = null
  
  try {
    // 模拟进度更新
    const progressInterval = setInterval(() => {
      if (reconciliationProgress.value < 90) {
        reconciliationProgress.value += 10
      }
    }, 300)
    
    const res = await paymentApi.reconcilePayment({
      date: reconciliationDate.value,
      type: 'ALL'
    })
    
    clearInterval(progressInterval)
    reconciliationProgress.value = 100
    reconciliationResult.value = res
    
    setTimeout(() => {
      reconciling.value = false
      reconciliationProgress.value = 0
      ElMessage.success('对账执行成功')
    }, 500)
  } catch (error) {
    console.error('执行对账失败:', error)
    reconciling.value = false
    reconciliationProgress.value = 0
    ElMessage.error('执行对账失败')
  }
}
</script>

<style scoped>
.api-example {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 10px 0;
}

.example-section {
  margin-bottom: 30px;
}

.example-section h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.stats-container {
  margin-top: 15px;
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.recon-result {
  margin-top: 15px;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.recon-result p {
  margin: 5px 0;
}
</style>